<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<script>
		var xmlHttp;
		window.onload=function(){
			// 1. 브라우저에 따른 XMLHttpRequest생성하기.
			xmlHttp = createXMLHTTPObject();
			
			// 2. 요청에 대한 응답처리 이벤트 리스너 등록.
			xmlHttp.onreadystatechange=on_ReadyStateChange;
			
			// 3.서버로 보낼 데이터 생성.
			// 3.데이터 생성.
			var data = "data1=ddandongne&data2=sample";
			
			// 4. POST 방식으로 데이터 보내기, 응답은 비동기로 클라이언트<->서버간의 연결 요청준비.
			xmlHttp.open("POST", "data.php", true);
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			
			// 5. 실제 데이터 전송.
			xmlHttp.send(data);
			
			// T. 동기/비동기 실행 테스트를 위한 부분.
			alert("전송 시작!");
		}
		
		// 1. 브라우저에 따른 XMLHttpRequest생성하기.
		function createXMLHTTPObject(){
			var xhr = null;
			if (window.XMLHttpRequest) {
				// IE7버전 이상, Chrome, Safari, Firefox, opera등 거의 대부분의 브라우저에서는
				// XMLHttpRequest객체를 제공합니다.
				xhr = new XMLHttpRequest();
			}
			else {
				// IE6,IE5 버전에서는 아래와 같이 XMLHttpRequest객체를 생성해야 합니다.
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
				
			return xhr;
		}
		
		// 6.응답처리.
		function on_ReadyStateChange(){
			// 4=데이터 전송 완료.(0=초기화전,1=로딩중,2=로딩됨,3=대화상태)
			if(xmlHttp.readyState==4){
				//200은 에러 없음.(404=페이지가 존재하지 않음)
				if(xmlHttp.status==200){
					// 서버에서 받은 값.
					alert("서버에서 받은 원본 데이터 : "+xmlHttp.responseText);
					
					//8. 데이터 파싱처리.
					parseData(xmlHttp.responseText);
				}
				else{
					alert("처리 중 에러가 발생했습니다.");
				}
			}
		}
		 
		//7. CSV포맷  데이터 처리.
		function parseData(strText){
			var aryData = strText.split("|");
			var objResult = {};
			for(var i=0;i<aryData.length;i++){
				var keyValue  = aryData[i].split("=");
				
				objResult[keyValue[0]]=keyValue[1];
			}
			
			alert("파싱한 데이터 : "+objResult);
			// chrome, safari에서는 console.log로 테스트 하세요.
			// console.log("파싱한 데이터 : ",objResult);
		}
	</script>
</head>

<body>
</body>
</html>


